﻿
@{
    ViewBag.Title = "Masonry";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Scripts.Render("~/bundles/masonry")

<h2>Masonry</h2>

<div id="Masonry-Container">
    <div class="item">
        <h2>Group Name</h2>
        <p>Hyderabad, India</p>

        <p><a href="#" class="LinkAsButton-Plain">Assign Group admin</a></p>
    </div>
    <div class="item">This is Group 1</div>
    <div class="item">This is Group 2</div>
    <div class="item">This is Group 3</div>
    <div class="item">This is 4  Gasdhasdfa sdfsjnbqkljwe4n iuqnhweirpv na;skjdn cekm raweio trjqwijroasjkd nf;asdm ngklanortnakjsdn froup 1 This is Gasdhasdfa sdfsjnbqkljwe4n iuqnhweirpv na;skjdn cekm raweio trjqwijroasjkd nf;asdm ngklanortnakjsdn froup 1 This is Gasdhasdfa sdfsjnbqkljwe4n iuqnhweirpv na;skjdn cekm raweio trjqwijroasjkd nf;asdm ngklanortnakjsdn froup 1</div>
    <div class="item">This is Group 5</div>
    <div class="item">This is Group 6</div>
    </div>

<script>
    var container = document.querySelector('#Masonry-Container');
    var masonry = new Masonry(container, {
        columnWidth: 300,
        itemSelector: '.item'
    });
</script>